<template>
    <div class="flex-row wrap">
        <img :src="avatar||defaultAvatar" alt="" class="avatar"> 
        <div class="flex-column info">
            <div class="name-wrap" >
                <slot name="title" v-if="$slots.title"></slot>
                <div class="textEllipsis name" v-else-if="title">{{title}}</div>
            </div>
            
            <div class="info-wrap">
                <slot name="info" v-if="$slots.info"></slot>
                <div class="textEllipsis fontGrey desc" v-else-if="info">
                    {{ info }}
                </div>
            </div>
            
        </div>   
    </div> 
    
</template>
<script>
export default {
    name:'user-wrapper',
    props:{
        avatar:{
            type:String
        },
        title:{
            type:String 
        },
        info:{
            type:String,
        }
    },
    mounted(){
    }  
}
</script>
<style scoped>
.wrap{
    align-items: center;
}
.avatar{
    width: 40px;
    height: 40px;
    border-radius: 3px;
    background: #ccc;
    flex-shrink: 0
}
.info{
    width: fit-content;
    padding-left: 5px;
    overflow: hidden;
}
.name {
    line-height: 20px;
    font-size: 14px;
}
.name-wrap{
    display: flex;
    flex-direction: row;    
}
.desc{
    font-size: 12px;
    margin-top: 5px;
    line-height: 14px
}
</style>